{% extends 'backend/subpage/backBase.html' %}
{% block crumb_content %}
    <ol class="breadcrumb">
        <li><a href="/main/userManage">后台管理</a></li>
        <li class="active">机房管理</li>
    </ol>
    <div class="well">
        机房管理
        {% block action_title %}
            &nbsp;&nbsp;|&nbsp;&nbsp;<span class="text-primary">修改</span>
        {% endblock %}
        {% block action_block %}
            <button class="btn btn-info pull-right" data-toggle="modal" data-target="#machineRoomModal"
                    data-whatever="增加机房" data-action="create">增加机房
            </button>
        {% endblock %}
    </div>
    <!-- Modal -->
    <div class="modal fade" id="machineRoomModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel"></h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal machine-form" onsubmit="return false;">
                        <div class="form-group">
                            <label for="machineRoomName" class="col-sm-2">机房名称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="machineRoomName" placeholder="机房名"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="machineRoomAlias" class="col-sm-2">机房别名</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="machineRoomAlias"
                                       placeholder="用户昵称"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="machineDesc" class="col-sm-2">相关描述</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="machineDesc"
                                       placeholder="相关描述"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="machineRoomStatus" class="col-sm-2">机房状态</label>
                            <div class="col-sm-10">
                                <div class="radio col-sm-3">
                                    <label>
                                        <input type="radio" name="machineRoomStatus" id="machineRoomStatus1"
                                               value="true"/>
                                        激活
                                    </label>
                                </div>
                                <div class="radio col-sm-3">
                                    <label>
                                        <input type="radio" name="machineRoomStatus" id="machineRoomStatus2"
                                               value="false"/>
                                        取消激活
                                    </label>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary confirm-action">确认</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block backend_content %}
    <div class="backend_info_table">

    </div>
    <div class="pagination-box">

    </div>
    <script>
        $(function () {
            var cur_item = GetQueryString("per_page") || 15, page = GetQueryString("page") || 1;//配置一页所显示的数据总数以及默认显示为第一页
            $("#body-content").delegate(".showPageItemsBox select", "change", function () {
                cur_item = $(this).val();
                window.location.href = "/main/machineManage?page=" + page + "&per_page=" + cur_item;
            });
            loadAllMachineLists();
            function loadAllMachineLists() {
                ajaxRequestJson("GET", "/main/engineroom?page=" + page + "&per_page=" + cur_item, {}, function (data) {
                    if (data.code === 0) {
                        var str = '';
                        if (data.data.length === 0) {
                            $(".backend_info_table").html("<h4 class='text-center'>暂无机房信息</h4>");
                        } else {
                            str += '<table class="table table-bordered"><thead><tr>' +
                                '<th>机房ID</th>' +
                                '<th>机房名称</th>' +
                                '<th>机房别名</th>' +
                                '<th>相关描述</th>' +
                                '<th>机房状态</th>' +
                                '<th>操作</th>' +
                                '</tr></thead>';
                            for (var i = 0; i < data.data.length; i++) {
                                var item = data.data[i];
                                var flag = item.status === true ? "<span class='status-show-btn bg-green'></span>" : "<span class='status-show-btn bg-red'></span>";
                                var menu = '<div class="dropdown">' +
                                    '<button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu' + i + '" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">操作' +
                                    '<span class="caret"></span>' +
                                    '</button>' +
                                    '<ul class="dropdown-menu" aria-labelledby="dropdownMenu' + i + '">' +
                                    '<li><a data-toggle="modal" data-target="#machineRoomModal" data-whatever="机房编辑" class="edit-action" data-action="edit" data-id="' + item.room_id + '">编辑</a></li>' +
                                    '<li><a href="#" class="delete-action" data-id="' + item.room_id + '">删除</a></li>' +
                                    '</ul>' +
                                    '</div>';
                                str += '<tr><td>' + item.room_id + '</td><td>' + item.room_name + '</td><td>' + item.room_alias + '</td><td>' + (item.description || '暂无') + '</td>';
                                str += '<td>' + flag + '</td>';
                                str += '<td>' + menu + '</td></tr>';
                            }
                            str += '</table>';
                            $(".backend_info_table").html(str);
                            loadPaginator("/main/machineManage", cur_item, ".pagination-box", data, [15, 20, 30]);
                        }
                    } else {
                        swal("糟糕!", data.msg, "error");
                    }
                }, function (error) {
                    swal("糟糕!", "请求出错！", "error");
                });
            }

            $("#machineRoomModal").on('show.bs.modal', function (event) {
                /*---------机房变量---------*/
                var room_name, room_alias, description, room_status, flag;
                /*---------\机房变量---------*/

                var button = $(event.relatedTarget);
                var operation = button.data("action");
                var modal_title = button.data('whatever');
                if (operation === "edit") {
                    var room_id = button.data("id");
                    ajaxRequestJson("GET", "/main/engineroom/" + room_id, "", function (data) {
                        $("#machineRoomName").val(data.data.room_name).attr("disabled", true);
                        $("#machineRoomAlias").val(data.data.room_alias);
                        $("#machineDesc").val(data.data.description);
                        $("input[name='machineRoomStatus'][value='" + data.data.status + "']").attr("checked", true);
                    }, function (error) {
                        swal("糟糕!", "请求出错！", "error");
                    });
                } else {//create
                    $(".machine-form")[0].reset();
                }
                $(".modal-title").html(modal_title);
                $(".confirm-action").click(function () {
                    if (operation === "create") {//创建操作
                        room_name = $("#machineRoomName").val();
                        room_alias = $("#machineRoomAlias").val();
                        description = $("#machineDesc").val();
                        room_status = $("input[name='machineRoomStatus']:checked").val();
                        flag = $("input[name='machineRoomStatus']:checked").val() === "true" ? true : false;
                        if (room_name.replace(/(^\s*)|(\s*$)/g, "") && room_alias.replace(/(^\s*)|(\s*$)/g, "") && description.replace(/(^\s*)|(\s*$)/g, "") && room_status.replace(/(^\s*)|(\s*$)/g, "")) {
                            ajaxRequestJson("POST", "/main/engineroom", {
                                room_name: room_name,
                                room_alias: room_alias,
                                description: description,
                                status: flag
                            }, function (data) {
                                if (data.code === 0) {
                                    $("#machineRoomModal").modal('hide');
                                    loadAllMachineLists();
                                } else {
                                    swal("糟糕!", data.msg, "error");
                                    return false;
                                }
                            }, function (error) {
                                swal("糟糕!", "请求出错！", "error");
                            });
                        } else {
                            swal("警告!", "请完善提交的参数！", "warning");
                            return false;
                        }
                    } else {//编辑操作
                        room_name = $("#machineRoomName").val();
                        room_alias = $("#machineRoomAlias").val();
                        description = $("#machineDesc").val();
                        room_status = $("input[name='machineRoomStatus']:checked").val();
                        flag = $("input[name='machineRoomStatus']:checked").val() === "true" ? true : false;

                        ajaxRequestJson("PUT", "/main/engineroom/" + room_id, {
                            room_alias: room_alias,
                            description: description,
                            status: flag
                        }, function (data) {
                            if (data.code === 0) {
                                $("#machineRoomModal").modal('hide');
                                loadAllMachineLists();
                            } else {
                                swal("糟糕!", data.msg, "error");
                            }
                        }, function (error) {
                            swal("糟糕!", "请求出错！", "error");
                            return false;
                        });
                    }
                });
            });

            //删除功能
            $(".backend_info_table").on("click", ".delete-action", function (event) {
                //获取机房id
                var room_id = $(event.target).data("id");
                swal({
                    title: "Warning!",
                    text: "是否确认要删除？",
                    icon: "warning",
                    buttons: {
                        cancel: "不，谢谢",
                        confirm: "确定"
                    }
                }).then(function (willDelete) {
                    if (willDelete) {
                        ajaxRequestJson("DELETE", "/main/engineroom/" + room_id, "", function (data) {
                            if (data.code === 0) {
                                swal("该条数据已成功删除!", {
                                    icon: "success"
                                });
                                loadAllMachineLists();
                            } else {
                                swal("糟糕!", "删除失败!", "error");
                            }
                        }, function (error) {
                            swal("糟糕!", "请求失败!", "error");
                        });
                    } else {
                        swal("你的数据是安全的!");
                    }
                });

            });

        });
    </script>
{% endblock %}